<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 定义两个变量 c1和c2（CSS3新特性） */
			:root {
				--c1: rgb(115, 195, 10);
				--c2: rgb(50, 170, 50);
			}
			
			/* 使用变量 */
			p {
				color: var(--c1);
				border: 1px solid var(--c2);
			}
			
		</style>
	</head>
	<body>
		<h1>:root伪类选择器</h1>
		<ul>
			<li>root伪类选择器和*通用选择器感觉有点一样</li>
			<li>都可以来定义css的变量（了解即可）</li>
			<li>通常，如果定义css变量，我们使用:root伪类选择器</li>
		</ul>
		<p class="p1">p1</p>
		<p class="p2">p2</p>
	</body>
</html>
